<template>
  <div>
    <div class="header-bg">
      <div class="body">
        <!-- 医生简介 -->
        <div class="doctor-detail">
          <div class="doctor-info">
            <div class="left-info">
              <p>
                <span class="name">{{ doctorData.doctorName }}</span>
                <span class="level">{{ doctorData.title }}</span>
              </p>
              <p class="hospitalName">
                {{ doctorData.hospitalName }}
              </p>
              <p class="depart">
                {{ doctorData.deptName }}
              </p>
            </div>
            <div class="right-img-wrapper">
              <van-image
                round
                class="right-img"
                :width="57"
                :height="57"
                :src="doctorData.portrait || imgDoctorAvatar"
                :error-icon="imgDoctorAvatar"
                :loading-icon="imgDoctorAvatar"
              />
              <img
                :src="favoriteIcon"
                class="favorite"
                alt=""
                @click="favorite"
              />
            </div>
          </div>
          <div class="praise-rate">
            <img src="~@/assets/img/famousDoctor/4.png" class="icon" alt="" />
            <span class="count">{{ doctorData.orderQuantity || 0 }}</span>
            <span class="desc">问诊量</span>
          </div>
          <div ref="doctorDesc" class="doctor-desc">
            <div ref="goodAt" :class="{ title: !introduceStatus }">
              擅长：{{ doctorData.goodAt || '暂无信息' }}
            </div>
            <div v-if="showBtn && doctorData.goodAt">
              <div
                v-if="!introduceStatus"
                class="hideAndShow"
                @click="showMoreDesc(true)"
              >
                展开 <van-icon name="arrow-down" />
              </div>
              <div
                v-if="introduceStatus"
                class="hideAndShow"
                @click="showMoreDesc(false)"
              >
                收起 <van-icon name="arrow-up" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { promiseWithError } from '@/utils/util';

export default {
  name: 'DoctorDetail',
  data() {
    return {
      doctorId: '',
      loadingTime: false,
      introduceStatus: true,
      showBtn: false,
      showDetails: false,
      discountDetail: {
        totalAmount: '', // 服务总价
        couponTotalPrice: '', // 优惠券减免金额
        integralTotalPrice: '', // 积分/金币减免金额
        equityTotalPrice: '' // 权益
      },
      finished: true,
      totalPage: 0,
      pageNum: 1,
      medicalType: '',
      docServiceList: [], // 问诊类型列表
      doctorData: {}, // 医生详情数据
      visitTime: null, // 医生排班数据
      imgDoctorAvatar: ''
    };
  },
  computed: {
    // 收藏icon
    favoriteIcon() {
      return '';
    }
  },
  async created() {
    const { id } = this.$route.query || {};
    this.doctorId = id;
    this.loadingTime = true;
    await this.getDoctorDetail();
    this.queryVisitTime();
  },
  methods: {
    // 显示优惠明细
    handleShowDetails(item) {
      console.log('优惠明细', item);
      this.showDetails = true;
      this.discountDetail = item.discountDetail;
    },
    // 获取优惠明细
    orderDiscountDetail() {
      const promiseArr = [];
      this.docServiceList.forEach(item => {
        const promise = this.$api.settlementAndPreOrder({
          price: item.price,
          quantity: '1',
          serviceCode: item.serviceCode
        });
        promiseArr.push(promise);
      });
      if (promiseArr.length === 0) return;
      Promise.all(promiseArr.map(p => promiseWithError(p)))
        .then(result => {
          console.log(result, this.docServiceList);
          this.docServiceList = this.docServiceList.map((item, index) => {
            if (result[index] && result[index].data && item.price) {
              const discountDetail = result[index].data || {};
              item.payableTotalAmount = discountDetail.payableTotalAmount;
              item.isDiscount =
                Number(discountDetail.totalAmount) -
                  Number(discountDetail.payableTotalAmount) >
                0;
              item.discountDetail = discountDetail;
            }
            return item;
          });
        })
        .catch(() => {
          this.$toast('服务有误，请稍后再试');
        });
    },
    // 获取擅长的行数
    countLines(ele) {
      const styles = window.getComputedStyle(ele, null);
      const lh = parseInt(styles.lineHeight, 10);
      const h = parseInt(styles.height, 10);
      const lc = Math.round(h / lh);
      console.log('line count:', lc, 'line-height:', lh, 'height:', h);
      return lc;
    },
    // 获取医生详情
    getDoctorDetail() {
      return this.$api
        .queryDoctorDetail({
          doctorId: this.doctorId
        })
        .then(res => {
          if (!res.data) return;
          this.doctorData = res.data;
          this.medicalType = res.data.medicalType;
          this.$nextTick(() => {
            const goodAt = this.$refs.goodAt;
            if (this.countLines(goodAt) > 5) {
              this.showBtn = true;
              this.showMoreDesc(false);
            }
          });
        })
        .catch(() => {
          this.loadingTime = false;
        });
    },
    // 查询医生排班数据
    queryVisitTime() {
      if (!this.doctorData.doctorCode) return;
      const params = {
        shopCode: this.doctorData.hospitalCode,
        doctorCode: this.doctorData.doctorCode,
        deptCode: this.doctorData.deptCode,
        medicalType: this.medicalType
      };
      this.$api
        .queryDoctorPrice(params)
        .then(res => {
          console.log('查询医生价格成功', res);
          if (!res.data) return;
          this.visitTime = res.data;
          const isSchedule = res.data.timeList && res.data.timeList.length > 0;
          if (this.medicalType === '3') {
            const { serviceDTO } = res.data || [];
            this.docServiceList = serviceDTO.map(item => {
              item.price = item.price || item.videoPrice;
              const medicalType = '1';
              item.medicalType = medicalType;
              item.isSchedule =
                medicalType === '1' || (medicalType === '2' && isSchedule);
              return item;
            });
          } else {
            if (res.data.price) {
              this.docServiceList = [
                {
                  price: res.data.price,
                  medicalType: this.medicalType,
                  serviceCode: this.doctorData.serviceCode,
                  isSchedule:
                    this.medicalType === '1' ||
                    (this.medicalType === '2' && isSchedule)
                }
              ];
            }
          }
          this.orderDiscountDetail();
        })
        .finally(() => {
          this.loadingTime = false;
        });
    },
    // 医生擅长描述
    showMoreDesc(showMore) {
      this.introduceStatus = showMore;
    },
    toConsultationInfo() {},
    // 收藏跟取消收藏
    favorite() {}
  }
};
</script>
<style lang="scss" scoped>
.header-bg {
  width: 375px;
  overflow-x: hidden;
}

.body {
  padding: 16px 13px 13px;
  background: white;
  border-radius: 20px 20px 0px 0px;
  margin-top: 10px;
  .doctor-detail {
    .doctor-info {
      display: flex;
      .left-info {
        flex: 1;
        .name {
          display: inline-block;
          padding-top: 6px;
          font-size: 23px;
          font-weight: 500;
          color: #333333;
          line-height: 28px;
        }
        .level {
          margin-left: 4px;
          font-size: 14px;
          font-weight: 400;
          color: #333333;
          line-height: 17px;
        }
        .hospitalName {
          margin-top: 10px;
          font-size: 14px;
          font-weight: 400;
          color: #666666;
          line-height: 17px;
        }
        .depart {
          margin-top: 4px;
          font-size: 14px;
          font-weight: 400;
          color: #666666;
          line-height: 17px;
        }
      }
      .right-img-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .right-img {
        width: 114px;
        height: 114px;
        border-radius: 50%;
      }
      .favorite {
        margin-top: 4px;
        width: 61px;
        height: 23px;
      }
    }
    .praise-rate {
      margin-top: 12px;
      font-size: 12px;
      font-weight: 400;
      color: #333333;
      line-height: 15px;
      // vertical-align: bottom;
      display: flex;
      align-items: baseline;
      .count {
        margin-left: 5px;
        font-size: 19px;
        font-weight: 500;
        color: #333333;
        line-height: 23px;
      }
      .icon {
        display: inline-block;
        width: 14px;
        height: 14px;
        object-fit: cover;
      }
      .desc {
        margin-left: 5px;
        margin-right: 25px;
      }
    }
    .doctor-desc {
      margin-top: 16px;
      background: rgba(246, 247, 248, 1);
      border-radius: 4px;
      padding: 10px;
      color: rgba(102, 102, 102, 1);
      font-size: 13px;
      line-height: 20px;
      .title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 5;
        overflow: hidden;
      }
      .hideAndShow {
        text-align: right;
        font-size: 13px;
        font-weight: 500;
        color: #000;
      }
    }
  }
  //   问诊服务
  .service {
    margin-top: 16px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 21px;
    color: rgba(51, 51, 51, 1);
    height: 21px;
    font-weight: 500;
  }
  .type {
    position: relative;
    padding: 10px 10px;
    box-shadow: 0px 4px 12px 0px #e6eaf1;
    border-radius: 6px;
    margin-bottom: 10px;

    .service-box {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e6e6e6;
      padding-bottom: 10px;
      margin-bottom: 10px;
    }

    .price-box {
      display: flex;
      justify-content: space-between;
      padding-left: 47px;

      .discount {
        color: #fa6400;
        font-size: 13px;
      }

      .price {
        color: #fa6400;
        font-weight: 600;
        font-size: 20px;
      }

      .detail {
        color: #999;
        font-size: 11px;
        margin-top: 3px;
      }
    }

    .left-wrapper {
      display: flex;

      .medical-type {
        font-size: 16px;
        font-weight: 600;
        color: #333333;
        line-height: 20px;
      }
    }

    .left-img {
      margin-right: 8px;
      width: 39px;
      height: 39px;

      &.pic-text {
        background: url('~@/assets/img/famousDoctor/6.png') no-repeat;
        background-size: 100% 100%;
      }

      &.video {
        background: url('~@/assets/img/famousDoctor/7.png') no-repeat;
        background-size: 100% 100%;
      }
    }

    .price {
      font-size: 13px;
      font-weight: 500;
      color: #ff8c15;
      line-height: 16px;
      margin-left: 4px;
    }

    .desc {
      margin-top: 4px;
      font-size: 13px;
      font-weight: 400;
      color: #666666;
      line-height: 16px;
    }

    .btn {
      padding: 9px;
      font-size: 12px;
      font-weight: 500;
      color: #ffffff;
      line-height: 15px;
      background: linear-gradient(#00eeee, #00dddd, #00c5cd);
      border-radius: 28px;

      &.disabled {
        background: #cdcdcd;
      }
    }
  }
}
</style>
